<template>
  <div>
    <h1 class="title">新闻动态</h1>
    <div class="body">
      <div class="body_title">
        <span>编辑新闻</span>
        <!--<span class="preview">预览</span>-->
      </div>
      <div class="main">
        <div>
          <div class="name">
            <label>标题文字：</label>
            <input v-model="news.title" maxlength="50" placeholder="字符最长长度为50个字符"/>
          </div>
          <div class="name">
            <label>摘要文字：</label>
            <input v-model="news.summary" maxlength="200" placeholder="字符最长长度为200个字符"/>
          </div>
          <div class="plus">
            <p>上传封面图片：图片大小为：100KB；图片格式：jpg、png；图片大小为：554*580mm</p>
            <div class="cover">
              <!--显示图片-->
              <div class="plus_img img" v-show="news.coverImage != ''">
                <img :src="news.coverImage"/>
                <div class="back">
                  <i class="el-icon-circle-close close" @click="removeImg"></i>
                  <p>删除封面图</p>
                </div>
              </div>
              <!--上传图片-->
              <div class="plus_img plus_i" v-show="news.coverImage == ''">
                <i class="el-icon-circle-plus" @click="addImg"></i>
                <p>上传封面图片</p>
                <input class="upload_input" ref="file" @change="fileChange" type="file" accept=".jpg,.png"/>
              </div>
            </div>
          </div>
          <div>
            <!--富文本-->
            <div id="editorElem" style="text-align:left"></div>
          </div>
          <div class="save">
            <el-button type="success" @click="saveNews">保存</el-button>
            <el-button type="info" @click="cancelNews()">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  //图片限制大小
  const AllowImgFileSize = 512000
  let editor
  export default {
    name: "add-news",
    data() {
      return {
        news: {
          id: '',
          title: '',
          summary: '',
          coverImage: '',
          content: ''
        },
      }
    },
    // vue创建实例后
    created() {
      let newsId = this.$route.params.id
      if (newsId != -1) {
        this.$post('/content/admin/news/query', {id: newsId}, res => {
          this.news = res
          this.news.id = newsId
          editor.txt.html(this.news.content)
        })
      }
    },
    mounted() {
      editor = new E('#editorElem')
      editor.customConfig.onchange = (html) => {
        this.news.content = html
      }
      editor.customConfig.uploadImgShowBase64 = true
      editor.customConfig.zIndex = 1000
      editor.create()
    },
    methods: {
      saveNews() {
        if (!this.news.title) {
          this.$message({message: '请输入新闻标题', type: 'info'})
          return
        }
        if (!this.news.summary) {
          this.$message({message: '请输入新闻摘要', type: 'info'})
          return
        }
        if (!this.news.coverImage) {
          this.$message({message: '请上传封面图', type: 'info'})
          return
        }
        if (!this.news.content) {
          this.$message({message: '请输入新闻内容', type: 'info'})
          return
        }
        let newsUrl = '/content/admin/news/add'

        if (this.news.id != '' && this.news.id.length > 1) {
          newsUrl = '/content/admin/news/update'
        }

        this.$post(newsUrl, this.news, res => {
          this.$message({message: '操作成功', type: 'success'})
          this.news = {}
          editor.txt.html('')
        })
      },
      fileChange(event) {
        let reader = new FileReader();
        let file = event.target.files[0]
        let imgUrlBase64;
        if (file) {
          //将文件以Data URL形式读入页面
          imgUrlBase64 = reader.readAsDataURL(file);
          reader.onload = (e) => {
            //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
            if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
              this.$alert('图片大小不能超过500K', '提示', {
                confirmButtonText: '确定',
              })
            } else {
              this.news.coverImage = reader.result
              this.coverShow = true
            }
          }
        }
      },
      cancelNews() {
        // this.$router.go(-1)
        this.$confirm('将返回到上页, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.go(-1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //移除封面图
      removeImg() {
        this.$confirm('你确定要删除该封面图, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.news.coverImage = ''
          this.$message({message: '删除成功', type: 'success'})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      // 上传封面图
      addImg() {
        this.$refs.file.click()
      }
    }
  }
</script>

<style scoped>
  .upload_input {
    display: none;
  }

  .title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
  }

  .body {
    border: 1px solid #EBEEF5;
  }

  .body .body_title {
    background-color: #EEEEEE;
    padding: 5px 10px;
  }

  .body_title .preview {
    float: right;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
  }

  .body_title .preview:hover {
    color: #409EFF;
  }

  .body .main .name {
    font-size: 14px;
    font-weight: 500;
    margin: 20px 0 0 0;
    padding: 0 20px;
  }

  .body .main .name input {
    outline: none;
    padding: 2px 5px;
    border: 0;
    border-bottom: 1px solid #606266;
    width: 400px;
  }

  .plus {
    padding: 20px;
  }

  .plus .cover > .plus_img {
    height: 110px;
    width: 160px;
    display: inline-block;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    margin: 5px 10px;
  }

  .plus .cover > .img {
    border: 1px solid #909399;
    position: relative;
  }

  .plus .cover > .img > img {
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .plus .cover > .img > .back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    opacity: 0;
  }

  .plus .cover > .img > .back:hover {
    background-color: black;
    opacity: 0.6;
    color: white;
  }

  .plus .cover > .img > .back > .close {
    margin-top: 20px;
    font-size: 40px;
    cursor: pointer;
  }

  .plus .cover > .img > .back > .close:hover {
    z-index: 3;
  }

  .plus .cover > .plus_i {
    border: 1px dashed #909399;
  }

  .plus .cover > .plus_i:hover {
    background-color: #DCDFE6;
  }

  .plus .cover > .plus_i > i {
    margin-top: 20px;
    font-size: 40px;
    cursor: pointer;
  }

  .plus > p {
    font-size: 12px;
  }

  .plus .cover .plus_img p {
    font-size: 12px;
  }

  .main .save {
    margin: 20px;
    text-align: center;
  }
</style>
